<template>
  <div class="view-container">
    <div class="view-list">
      <!-- head return-->
      <div class="view-head">
        <van-nav-bar title="查看订单">
          <template #left>
            <van-icon name="arrow-left" size="24" color="black" @click="backGoods" />
          </template>
        </van-nav-bar>
      </div>

      <!-- 列表及金额显示模块 -->
      <div class="order-content">
        <div class="address-module">
          <div class="address-box">
            <div class="address-select" @click="selectAddress">
              <span>选择收货地址</span>
              <van-icon name="arrow" />
            </div>
            <div class="address-value">
              <div class="address-text">
                <span>{{nowAddress.address}}</span>
              </div>
              <div class="contact-text">
                <span>{{nowAddress.name}}</span>
                <span>{{nowAddress.tel}}</span>
              </div>
            </div>
          </div>
        </div>
        <div class="list-module">
          <div class="shops-box">
            <img class="shops-logo" :src="orderDetails.shopsInfo.img" alt="Logo">
            <span class="shops-name">{{orderDetails.shopsInfo.name}}</span>
          </div>
          <div class="goods-list">
            <div class="goods-card" v-for="item in orderDetails.goodsList" :key="item.id">
              <van-card :num="item.amount" :tag="item.discount_amount > 0?'折扣':''"
                :price="item.discount_amount > 0 ? (item.price - item.discount_amount)*item.amount + '.00':item.price*item.amount +'.00'"
                :desc="item.discount_amount > 0?'￥'+item.price*item.amount:''" :title="item.name"
                :currency="$t('m.goods.money')"
                :thumb="item.image_thumbnail_cdn===''||item.image_thumbnail_cdn===null?localIMG:item.image_thumbnail_cdn" />
            </div>
          </div>
          <div class="charges-list">
            <div class="amount-type_1">
              <span>优惠券</span>
              <span>无</span>
            </div>
            <div class="amount-type_1">
              <span>折扣</span>
              <span>-￥{{orderDetails.expensesList.discountSum}}</span>
            </div>
            <div class="amount-type">
              <span>税</span>
              <span>￥{{orderDetails.expensesList.taxSum}}</span>
            </div>
            <div class="amount-type" v-if="radio==1">
              <span>服务费</span>
              <span>￥{{orderDetails.expensesList.serviceSum}}</span>
            </div>
            <div class="amount-type" v-if="radio==3">
              <span>配送费</span>
              <span>￥12</span>
            </div>
          </div>
        </div>
        <div class="takeFood-module">
          <div class="takeFood-select">
            <div>取餐方式</div>
            <div>
              <van-radio-group v-model="radio" direction="horizontal">
                <van-radio name="1">堂食</van-radio>
                <van-radio name="2">自提</van-radio>
                <van-radio name="3">外卖</van-radio>
              </van-radio-group>
            </div>
          </div>
        </div>
        <div class="remarks-module">
          <div class="remarks-box" @click="show=!show">
            <div>偏好及口味的备注</div>
            <div>
              <div class="remarks-value">{{message}}</div>
              <van-icon name="arrow" />
            </div>
          </div>
        </div>
      </div>

      <!-- 提交订单按钮模块 -->
      <div class="submit-module">
        <div class="submit-box">
          <div class="final-sum">
            <span class="discountSum" v-if="orderDetails.expensesList.discountSum > 0">共优惠
              ￥{{orderDetails.expensesList.discountSum}}</span>
            <span class="finalSum">￥{{finalSum}}</span>
          </div>
          <div class="submit-button" @click="submitOrder">
            <span>提交订单</span>
          </div>
        </div>
      </div>

      <!-- 备注弹出模块 -->
      <van-popup v-model="show" round position="bottom" :style="{ height: '30%' }">
        <div class="remarks-input-box">
          <div class="remarks-input-head">
            <span>偏好及口味的备注</span>
            <span @click="show=!show">完成</span>
          </div>
          <van-field v-model="message" rows="3" autosize type="textarea" maxlength="60" placeholder="请输入备注"
            show-word-limit />
        </div>
      </van-popup>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: false,
      radio: '3',
      takeFoodType: ['堂食', '自提', '外卖'],
      orderDetails: {},
      finalSum: 0,
      message: '',
      nowAddress: {},
      localIMG: './../static/img/mxbc/Ice_Cream/Ferris_Crispy.jpeg'
    }
  },
  created() {
    this.orderDetails = this.$store.state.listDetails
    this.finalSum = Math.round((this.orderDetails.expensesList.totalSum + 12) * 100) / 100
    this.nowAddress = this.$store.state.nowAddress
  },
  watch: {
    // 监听取餐方式，计算总金额
    radio(newRadio) {
      var totalSum = this.orderDetails.expensesList.totalSum
      var preTaxSum = this.orderDetails.expensesList.preTaxSum
      var serviceRate = this.orderDetails.expensesList.serviceRate
      switch (newRadio) {
        case '1':
          this.orderDetails.expensesList.serviceSum = Math.round(preTaxSum * serviceRate * 100) / 100
          this.finalSum = Math.round((totalSum + preTaxSum * serviceRate) * 100) / 100
          break
        case '3':
          this.finalSum = Math.round((this.orderDetails.expensesList.totalSum + 12) * 100) / 100
          break
        default:
          this.finalSum = this.orderDetails.expensesList.totalSum
          break
      }
    }
  },
  methods: {
    backGoods() {
      this.$emit('tabbarID', 1)
      this.$router.push('/home/goodspage/' + this.orderDetails.shopsInfo.id)
    },
    // 选择地址
    selectAddress() {
      this.$router.push('/home/address')
    },
    // 提交订单打包数据
    submitOrder() {
      if (this.nowAddress.address !== undefined) {
        this.orderDetails.address = this.nowAddress
        this.orderDetails.remarks = this.message.length !== 0 ? this.message : '无'
        this.orderDetails.takeFoodType = this.takeFoodType[Number(this.radio) - 1]
        switch (this.radio) {
          case '1':
            this.orderDetails.expensesList.deliverySum = 0
            this.orderDetails.expensesList.FinalTotalSum = this.finalSum
            break
          case '2':
            this.orderDetails.expensesList.deliverySum = 0
            this.orderDetails.expensesList.serviceSum = 0
            this.orderDetails.expensesList.FinalTotalSum = this.orderDetails.expensesList.totalSum
            break
          default:
            this.orderDetails.expensesList.serviceSum = 0
            this.orderDetails.expensesList.deliverySum = 12
            this.orderDetails.expensesList.FinalTotalSum = this.finalSum
            break
        }
        this.$store.commit('submitOrder', this.orderDetails)
        this.$router.push('/home/payments')
      } else {
        this.$notify({
          message: '请选择地址',
          color: 'white',
          background: 'orange',
          duration: 1200
        })
      }
    }
  }
}
</script>

<style lang="less" scoped>
.view-list {
  position: absolute;
  width: 100%;
  max-width: 640px;
  z-index: 2;
  background-color: #ededed;
}
.view-head {
  position: relative;
  .van-nav-bar {
    position: fixed;
    max-width: 640px;
    width: 100%;
  }
}
.order-content {
  position: absolute;
  width: 97%;
  top: 46px;
  left: 50%;
  transform: translateX(-50%);
  .address-module {
    display: flex;
    justify-content: center;
    width: 100%;
    height: 90px;
    border-radius: 9px;
    margin-bottom: 0.5em;
    background: white;
    .address-box {
      width: 90%;
      .address-select {
        display: flex;
        align-items: center;
        width: 100%;
        height: 50%;
        border-bottom: 0.1em solid #f2f2f2;
        font-size: 1.1em;
        color: orange;
        span:nth-child(1) {
          margin-right: 0.3em;
        }
      }
      .address-value {
        overflow: hidden;
        display: flex;
        flex-direction: column;
        justify-content: center;
        width: 100%;
        height: 50%;
        .address-text {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          width: 90%;
          font-size: 0.9em;
          color: #454545;
        }
        .contact-text {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          width: 90%;
          font-size: 0.9em;
          color: #999999;
          span:nth-child(1) {
            margin-right: 0.6em;
          }
        }
      }
    }
  }
  .list-module {
    overflow: hidden;
    width: 100%;
    border-radius: 9px;
    margin-bottom: 0.5em;
    background: white;
    .shops-box {
      display: flex;
      align-items: center;
      height: 45px;
      padding-left: 1.2em;
      .shops-logo {
        width: 30px;
        height: 30px;
        margin-right: 0.6em;
        border-radius: 6px;
      }
      .shops-name {
        font-size: 0.9em;
      }
    }
    .goods-list {
      width: 100%;
      border-bottom: 0.1em solid #f2f2f2;
      /deep/.van-card {
        display: flex;
        flex-direction: column;
        justify-content: center;
        height: 70px;
        background: white;
      }
      /deep/.van-card__header {
        height: 70px;
      }
      /deep/.van-card__thumb {
        width: 50px;
        height: 50px;
      }
      /deep/.van-tag--mark {
        background: #ff362e;
      }
      /deep/.van-card__content {
        min-height: 50px;
        height: 50px;
        .van-card__num {
          position: absolute;
          bottom: 0;
          font-size: 1.2em;
        }
        .van-card__price {
          position: absolute;
          right: 0;
          bottom: 0;
          font-size: 1.1em;
          color: red;
          font-weight: 400;
          .van-card__price-integer {
            font-size: 1.1em;
          }
          .van-card__price-currency {
            font-size: 1.1em;
          }
        }
        .van-card__desc {
          position: absolute;
          right: 0;
          color: #b8b8b8;
          text-decoration: line-through;
        }
      }
      /deep/.van-image {
        overflow: hidden;
        width: 100%;
        height: 100%;
        border-radius: 8px;
      }
      .van-tag--mark {
        transform: translate(-10%, -20%) scale(0.8);
      }
    }
    .charges-list {
      display: flex;
      align-items: center;
      flex-direction: column;
      width: 100%;
      .amount-type,
      .amount-type_1 {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 90%;
        height: 36px;
        color: #6b6b6b;
      }
      .amount-type {
        span:nth-child(2) {
          font-size: 0.9em;
          color: #b8b8b8;
        }
      }
      .amount-type_1 {
        span:nth-child(2) {
          color: red;
          font-size: 0.9em;
        }
      }
    }
  }
  .takeFood-module {
    display: flex;
    justify-content: center;
    width: 100%;
    height: 45px;
    border-radius: 9px;
    background: white;
    margin-bottom: 0.5em;
    /deep/ .van-radio__icon--checked .van-icon {
      background-color: orange;
      border-color: orange;
    }
    .takeFood-select {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 90%;
      font-size: 0.9em;
      color: #6b6b6b;
    }
  }
  .remarks-module {
    overflow: hidden;
    display: flex;
    justify-content: center;
    width: 100%;
    height: 40px;
    border-radius: 9px;
    margin-bottom: 90px;
    background: white;
    .remarks-box {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 90%;
      height: 100%;
      color: #6b6b6b;
      div:nth-child(1) {
        width: 50%;
        font-size: 0.9em;
      }
      div:nth-child(2) {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        width: 50%;
        .remarks-value {
          overflow: hidden;
          width: 80%;
          white-space: nowrap;
          text-overflow: ellipsis;
          font-size: 0.9em;
          color: #c9c9c9;
        }
      }
    }
  }
}
/deep/.van-popup {
  display: flex;
  flex-direction: column;
  align-items: center;
  .remarks-input-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 90%;
    height: 40px;
    font-size: 0.9em;
    span:nth-child(1) {
      color: #808080;
    }
    span:nth-child(2) {
      color: orange;
    }
  }
  .remarks-input-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
  }
}
/deep/.van-cell {
  width: 90%;
  padding: 0;
  border-radius: 9px;
  margin-top: 0.6em;
  padding: 0.3em;
  background: #f5f5f5;
  .van-field__word-limit {
    color: #a6a6a6;
  }
}
.submit-module {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  max-width: 640px;
  width: 100%;
  height: 60px;
  bottom: 0;
  .submit-box {
    overflow: hidden;
    position: absolute;
    display: flex;
    width: 100%;
    height: 50px;
    bottom: 0;
    background-color: #fafafa;
    .final-sum {
      display: flex;
      flex-direction: column;
      justify-content: center;
      width: 60%;
      height: 100%;
      .discountSum {
        font-size: 0.6em;
        color: #e3020d;
        font-weight: bolder;
        margin-left: 15px;
      }
      .finalSum {
        font-size: 1.2em;
        margin-left: 15px;
        color: #666666;
      }
    }
    .submit-button {
      width: 40%;
      height: 100%;
      text-align: center;
      line-height: 50px;
      background-color: orange;
      color: white;
      font-size: 1.2em;
    }
  }
}
</style>
